<template>
	<view class="page-view" :style="skin">
		<zx-nav title="运输方式" bg="#fff" fixedTop></zx-nav>
		<view class="title">
			配送方式
			<text>估重：{{ goods_weight }}kg</text>
		</view>
		<view class="transportwaylist u-flex flex-wrap justify-between">
			<view class="item tuijian" @tap="selectway(tuijiantransportway)" v-if="tuijiantransportway" :class="[{ active: temtransportway.id == tuijiantransportway.id }]">
				<view class="name text-cut">{{ tuijiantransportway.name }}</view>
				<view>约{{ tuijiantransportway.transport_amount }}</view>
			</view>
			<view class="item" @tap="selectway(item)" :class="[{ active: temtransportway.id == item.id }]" v-for="(item, index) in transportList" :key="index">
				<view class="name text-cut">{{ item.name }}</view>
				<view>约{{ item.transport_amount }}</view>
			</view>
			<i></i>
			<i></i>
			<i></i>
		</view>
		<view class="list">
			<view class="item" v-if="temtransportway.fahuo_time">
				<view class="title">发货时间</view>
				<view class="info">{{ temtransportway.fahuo_time }}</view>
			</view>
			<view class="item" v-if="temtransportway.time">
				<view class="title">运输时效</view>
				<view class="info">{{ temtransportway.time }}</view>
			</view>
			<view class="item" v-if="temtransportway.info">
				<view class="title">运输说明</view>
				<rich-text :nodes="temtransportway.info || ''"></rich-text>
			</view>
			<view class="item" v-if="temtransportway.youshi">
				<view class="title">物流优势</view>
				<view class="info">{{ temtransportway.youshi }}</view>
			</view>
			<view class="item" v-if="temtransportway.lieshi">
				<view class="title">物流缺点</view>
				<view class="info">{{ temtransportway.lieshi }}</view>
			</view>
			<!-- <view class="item" v-if="temtransportway.first_weight">
				<view class="title">首重价格</view>
				<view class="info">{{ temtransportway.first_weight }}</view>
			</view> -->
			<view class="item" v-if="temtransportway.jifei">
				<view class="title">计费方式</view>
				<view class="info">{{ temtransportway.jifei }}</view>
			</view>
			<view class="item" v-if="temtransportway.xianzhong">
				<view class="title">单件限重</view>
				<view class="info">{{ temtransportway.xianzhong }}</view>
			</view>
		</view>
		<!-- 	<view class="transportwayinfo">{{ temtransportway.time || '' }}</view>
		<rich-text :nodes="temtransportway.info || ''"></rich-text> -->
		<view class="ftbar"><u-button @click="confrimfastmailway" shape="circle" type="success" text="确认"></u-button></view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			transportList: [],
			temtransportway: null,
			tuijiantransportway: {},
			transportway: '',
			goods_weight: 0
		};
	},
	onLoad(options) {
		console.log('options.param', options);
		this.calcOrder(options);
		this.transportway = options.transport;
	},
	methods: {
		//订单计算
		calcOrder(param) {
			console.log('hahah');
			this.$postAction(this.$api.calcOrder, param).then(da => {
				if (da.code == 0) {
					let orderinfo = { ...da.data };
					this.goods_weight = orderinfo.goods_weight;
					this.transportList = orderinfo.transport && orderinfo.transport.show;
					this.tuijiantransportway = orderinfo.transport && orderinfo.transport.tuijian;
					if (this.transportList.length > 0 && this.transportway) {
						let index = this.transportList.findIndex(item => item.id == this.transportway);
						if (index > -1) {
							this.temtransportway = { ...this.transportList[index] };
						} else {
							this.temtransportway = { ...orderinfo.transport.tuijian };
						}
					} else {
						this.temtransportway = { ...orderinfo.transport.tuijian };
					}
				} else {
					uni.showToast({
						title: da.msg,
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 500);
				}
			});
		},
		/* 确认运输方式 */
		confrimfastmailway() {
			this.$u.prePage().confrimfastmailway(this.temtransportway);
			this.$Router.back();
		},
		selectway(transportway) {
			this.temtransportway = { ...transportway };
		}
	}
};
</script>

<style scoped lang="less">
.page-view {
	padding: 30upx 30upx 130upx;
	height: 100vh;
	overflow: auto;
	background: #fff;
	box-sizing: border-box;
	position: relative;
	.title {
		margin-right: 40rpx;
		font-weight: bold;
		color: #000;
		text {
			color: #f03118;
			margin-left: 20rpx;
		}
	}
	.ftbar {
		background: #fff;
		padding: 20upx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.btn {
		width: 650upx;
		height: 86upx;
		background: linear-gradient(135deg, #fe8b2c 0%, #fe5608 100%);
		border-radius: 43upx;
		margin: 0 auto;
		text-align: center;
		color: #fff;
		font-size: 28upx;
		line-height: 86upx;
	}
	.list {
		.item {
			font-size: 26upx;
			color: #424242;
			line-height: 42upx;
			padding: 32upx 20upx;
			border-bottom: 1px solid #e6e6e6;
			&:first-child {
				border-top: 1px solid #e6e6e6;
			}
			.title {
				color: #232323;
				font-weight: bold;
				font-size: 30upx;
				position: relative;
				&::before {
					position: absolute;
					top: 50%;
					left: -20upx;
					transform: translateY(-50%);
					content: '';
					display: block;
					width: 8upx;
					border-radius: 100%;
					height: 8upx;
					background: linear-gradient(135deg, #fe8b2c 0%, #fe5608 100%);
				}
			}
		}
	}
}

.transportwaylist {
	margin-top: 20upx;
	.item {
		background: #f4f4f4;
		border-radius: 8upx;
		padding: 16upx;
		width: 150upx;
		font-size: 22upx;
		position: relative;
		color: #48484a;
		margin-bottom: 10upx;

		.name {
			font-size: 26upx;
			margin-bottom: 12upx;
			color: #48484a;
		}

		&.active {
			color: var(--nav-bg);
			height: 110upx;
			background: #fff8f9;
			border: 2upx solid var(--nav-bg);
			.name {
				color: var(--nav-bg);
			}
		}

		&.tuijian {
			&::before {
				position: absolute;
				right: 0;
				top: -2rpx;
				height: 30upx;
				width: 30upx;
				content: '';
				background: url(/static/recommend.png) no-repeat center center;
				background-size: 100% auto;
			}
		}

		&.active {
			&::after {
				position: absolute;
				right: 0;
				bottom: -2rpx;
				height: 34upx;
				width: 34upx;
				content: '';
				background: url(/static/selected.png) no-repeat center center;
				background-size: 100% auto;
			}
		}
	}

	i {
		width: 150upx;
		display: block;
	}
}

.transportwayinfo {
	color: #fe5608;
	font-size: 26upx;
	line-height: 42upx;
}
</style>
